<template>
  <div class="top-banner">
    <img src="../assets/images/header.png" style="float: left;margin-left: 500px;">
    <div style="float: right; margin-right: 50px;margin-top: 51px" v-if="loginedUser">
      <Dropdown class="manage-dropdown-loginedUser" @on-click="clickMenu">
        <a href="javascript:void(0)">
          <span style="color: white;font-size: 20px">{{loginedUser}}</span>
          <Icon type="ios-arrow-down" style="color: white"></Icon>
        </a>
        <DropdownMenu slot="list" style="width: 150px;">
          <DropdownItem name="注销">注销</DropdownItem>
          <DropdownItem name="返回主页">返回主页</DropdownItem>
          <DropdownItem name="个人中心">个人中心</DropdownItem>
          <DropdownItem name="后台管理" v-if="dropdownManage">后台管理</DropdownItem>
        </DropdownMenu>
      </Dropdown>
    </div>

  </div>
</template>

<script>
    import ManageService from "../services/ManageService";
    import cookies from 'js-cookie'
    import AuthPermissionService from "../services/AuthPermissionService";

    export default {
        name: "HeaderComponent",
        data(){
          return{
            loginedUser:"",
            manageService: null,
            authPermissionService: null,
            dropdownManage: true
          }
        },
        created(){
          this.init();
        },
        methods:{
          init(){
            this.manageService = new ManageService(this);
            this.authPermissionService = new AuthPermissionService(this);
            this.loginedUser = cookies.get("userName");
            this.authPermissionService.manageAuth(function (_this, result) {
              if(result == false){
                _this.dropdownManage = false;
              }
            });
          },
          clickMenu(name){
            if(name == "注销"){
              this.manageService.logout();
            }
            if(name == '后台管理'){
              this.$router.push({path:'/manage'});
            }
            if(name == '个人中心'){
              this.$router.push({path:'/personalCenter'});
            }
            if(name == '返回主页'){
              this.$router.push({path:'/index'});
            }
          },
        }
    }
</script>

<style scoped>
  .top-banner {
    background: #00a0d8;
    height: 86px;
    width: 100%;
    text-align: center;
  }
</style>
